<template>
  <div class="app-container">
    <div class="filter-container">
      <!-- margin-left:50px; -->
      <el-form
        label-position="left"
        label-width="180px"
        style="width: 100%; margin-left: 20px"
      >
        <el-row type="flex" justify="start">
          <el-col :span="8">
            <el-form-item label="物料代码:">
              <el-input
                v-model="listQuery.FBillNo"
                placeholder="物料代码"
                style="width: 200px"
                class="filter-item"
                clearable
                @keyup.enter.native="handleFilter"
              />
            </el-form-item>
            <el-form-item label="对应料号:">
              <el-input
                v-model="listQuery.FBillNo"
                placeholder="对应料号"
                style="width: 200px"
                class="filter-item"
                clearable
                @keyup.enter.native="handleFilter"
              />
            </el-form-item>
            <el-form-item label="销售订单号:">
              <el-input
                v-model="listQuery.FBillNo"
                placeholder="销售订单号"
                style="width: 200px"
                class="filter-item"
                clearable
                @keyup.enter.native="handleFilter"
              />
            </el-form-item>
            <el-form-item label="发票号码:">
              <el-input
                v-model="listQuery.FBillNo"
                placeholder="发票号码"
                style="width: 200px"
                class="filter-item"
                clearable
                @keyup.enter.native="handleFilter"
              />
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="客户名称:">
              <el-input
                v-model="listQuery.FBillNo"
                placeholder="客户名称"
                style="width: 200px"
                class="filter-item"
                clearable
                @keyup.enter.native="handleFilter"
              />
            </el-form-item>
            <el-form-item label="客户订单号:">
              <el-input
                v-model="listQuery.FBillNo"
                placeholder="客户订单号"
                style="width: 200px"
                class="filter-item"
                clearable
                @keyup.enter.native="handleFilter"
              />
            </el-form-item>
            <el-form-item label="客户名称:">
              <el-input
                v-model="listQuery.FBillNo"
                placeholder="客户名称"
                style="width: 200px"
                class="filter-item"
                clearable
                @keyup.enter.native="handleFilter"
              />
            </el-form-item>
            <el-form-item label="发票申请时长">
              <el-input
                type="number"
                v-model="listQuery.FMoreThanDays"
                placeholder="时长>=1天"
                style="width: 200px"
                class="filter-item"
                clearable
                @click="handleFilter"
              />
            </el-form-item>
            <el-form-item label="延期时长">
              <el-input
                type="number"
                v-model="listQuery.FMoreThanDays"
                placeholder="时长>=1天"
                style="width: 200px"
                class="filter-item"
                clearable
                @click="handleFilter"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="ERP发票申请开始日期:">
              <el-date-picker
                v-model="listQuery.FStartDate"
                type="datetime"
                format="yyyy-MM-dd"
                placeholder="开始日期"
                @keyup.enter.native="handleFilter"
              />
            </el-form-item>
            <el-form-item label="ERP发票申请截止日期:">
              <el-date-picker
                v-model="listQuery.FEndDate"
                type="datetime"
                format="yyyy-MM-dd"
                placeholder="截止日期"
                @keyup.enter.native="handleFilter"
              />
            </el-form-item>
            <el-form-item label="销售出库单审核开始日期:">
              <el-date-picker
                v-model="listQuery.FStartDate"
                type="datetime"
                format="yyyy-MM-dd"
                placeholder="开始日期"
                @keyup.enter.native="handleFilter"
              />
            </el-form-item>
            <el-form-item label="销售出库单审核截止日期:">
              <el-date-picker
                v-model="listQuery.FEndDate"
                type="datetime"
                format="yyyy-MM-dd"
                placeholder="截止日期"
                @keyup.enter.native="handleFilter"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24" :offset="18">
            <el-button
              v-waves
              class="filter-item"
              type="primary"
              icon="el-icon-search"
              @click="handleFilter"
            >
              查询
            </el-button>
            <el-button
              v-waves
              :loading="downloadLoading"
              class="filter-item"
              type="primary"
              icon="el-icon-download"
              @click="handleDownload"
            >
              导出当前页
            </el-button>
            <el-button
              v-waves
              :loading="downloadLoading"
              class="filter-item"
              type="primary"
              icon="el-icon-download"
              @click="handleDownloadAll"
            >
              导出全部
            </el-button>
          </el-col>
        </el-row>
      </el-form>
    </div>

    <el-table
      :key="tableKey"
      v-loading="listLoading"
      :data="list"
      border
      fit
      highlight-current-row
      style="width: 100%"
      @sort-change="sortChange"
    >
      <el-table-column label="序号" width="70px" align="center" fixed>
        <template slot-scope="{ row }">
          <span>{{ row.FRowNumber }}</span>
        </template>
      </el-table-column>
      <el-table-column label="物料代码" width="150px" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.物料代码 }}</span>
        </template>
      </el-table-column>
      <el-table-column label="对应料号" width="150px" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.对应料号 }}</span>
        </template>
      </el-table-column>
      <el-table-column label="物料名称" width="150px" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.物料名称 }}</span>
        </template>
      </el-table-column>
      <el-table-column label="规格" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.规格 }}</span>
        </template>
      </el-table-column>
      <el-table-column label="销售订单号" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.销售订单号 }}</span>
        </template>
      </el-table-column>

      <el-table-column label="客户订单号" width="200px" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.客户订单号 }}</span>
        </template>
      </el-table-column>
      <el-table-column label="客户名称" width="200px" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.客户名称 }}</span>
        </template>
      </el-table-column>
      <el-table-column label="业务员" width="200px" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.业务员 }}</span>
        </template>
      </el-table-column>
      <el-table-column label="销售出库单号" width="200px" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.销售出库单号 }}</span>
        </template>
      </el-table-column>

      <el-table-column label="ERP出库单审核日期" align="center">
        <template slot-scope="{ row }">
          <span>{{
            row.ERP出库单审核日期 == null
              ? ""
              : row.ERP出库单审核日期.substring(0, 10)
          }}</span>
        </template>
      </el-table-column>

      <el-table-column label="发票号码" width="200px" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.发票号码 }}</span>
        </template>
      </el-table-column>

      <el-table-column label="ERP发票申请日" align="center">
        <template slot-scope="{ row }">
          <span>{{
            row.ERP发票申请日 == null ? "" : row.ERP发票申请日.substring(0, 10)
          }}</span>
        </template>
      </el-table-column>
      <el-table-column label="发票日期" align="center">
        <template slot-scope="{ row }">
          <span>{{
            row.发票日期 == null ? "" : row.发票日期.substring(0, 10)
          }}</span>
        </template>
      </el-table-column>

      <el-table-column
        label="是否需要现场安装验收"
        width="150px"
        align="center"
      >
        <template slot-scope="{ row }">
          <span>{{ row.是否需要现场安装验收 }}</span>
        </template>
      </el-table-column>

      <el-table-column label="开票时长" width="80px" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.开票时长 }}</span>
        </template>
      </el-table-column>
      <el-table-column label="是否延期" width="80px" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.是否延期 }}</span>
        </template>
      </el-table-column>
      <el-table-column label="延期天数" width="80px" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.延期天数 }}</span>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.limit"
      @pagination="getList"
      style="text-align: center"
    />
  </div>
</template>

<script>
import { fetchList, fetchPv } from "@/api/ApiService";
import waves from "@/directive/waves"; // waves directive
import { parseTime } from "@/utils";
import Pagination from "@/components/Pagination"; // secondary package based on el-pagination

export default {
  name: "ComplexTable",
  components: { Pagination },
  directives: { waves },
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: "success",
        draft: "info",
        deleted: "danger"
      };
      return statusMap[status];
    }
  },
  data() {
    return {
      tableKey: 0,
      list: null,
      total: 0,
      listLoading: true,
      listQuery: {
        page: 1,
        limit: 10,
        importance: undefined,
        title: undefined,
        type: undefined,
        sort: "+id"
      },
      temp: {
        id: undefined,
        importance: 1,
        remark: "",
        timestamp: new Date(),
        title: "",
        type: "",
        status: "published"
      },
      dialogFormVisible: false,
      dialogStatus: "",
      textMap: {
        update: "Edit",
        create: "Create"
      },
      dialogPvVisible: false,
      pvData: [],
      rules: {
        type: [
          { required: true, message: "type is required", trigger: "change" }
        ],
        timestamp: [
          {
            type: "date",
            required: true,
            message: "timestamp is required",
            trigger: "change"
          }
        ],
        title: [
          { required: true, message: "title is required", trigger: "blur" }
        ]
      },
      downloadLoading: false
    };
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      this.listLoading = true;
      this.listQuery.ActionCode = "SearchStockPrepareInTimeReport";
      fetchList(this.listQuery).then(response => {
        this.list = response.data.items;
        this.total = response.data.total;
        this.listLoading = false;
      });
    },
    handleFilter() {
      this.listQuery.page = 1;
      this.getList();
    },
    handleModifyStatus(row, status) {
      this.$message({
        message: "操作Success",
        type: "success"
      });
      row.status = status;
    },
    sortChange(data) {
      const { prop, order } = data;
      if (prop === "id") {
        this.sortByID(order);
      }
    },
    sortByID(order) {
      if (order === "ascending") {
        this.listQuery.sort = "+id";
      } else {
        this.listQuery.sort = "-id";
      }
      this.handleFilter();
    },
    resetTemp() {
      this.temp = {
        id: undefined,
        importance: 1,
        remark: "",
        timestamp: new Date(),
        title: "",
        status: "published",
        type: ""
      };
    },

    handleFetchPv(pv) {
      fetchPv(pv).then(response => {
        this.pvData = response.data.pvData;
        this.dialogPvVisible = true;
      });
    },
    handleDownload() {
      this.downloadLoading = true;
      import("@/vendor/Export2Excel").then(excel => {
        const tHeader = [
          "序号",
          "物料代码",
          "对应料号",
          "物料名称",
          "规格",
          "销售订单号",
          "客户订单号",
          "客户名称",
          "业务员",
          "销售出库单号",
          "ERP出库单审核日期",
          "发票号码",
          "ERP发票申请日",
          "发票日期",
          "是否需要现场安装验收",
          "开票时长",
          "是否延期",
          "延期天数",
          "制单人"
        ];
        const filterVal = [
          "FRowNumber",
          "物料代码",
          "对应料号",
          "物料名称",
          "规格",
          "销售订单号",
          "客户订单号",
          "客户名称",
          "业务员",
          "销售出库单号",
          "ERP出库单审核日期",
          "发票号码",
          "ERP发票申请日",
          "发票日期",
          "是否需要现场安装验收",
          "开票时长",
          "是否延期",
          "延期天数",
          "制单人"
        ];
        const data = this.formatJson(filterVal);
        excel.export_json_to_excel({
          header: tHeader,
          data,
          filename: "table-list"
        });
        this.downloadLoading = false;
      });
    },
    handleDownloadAll() {
      this.listLoading = true;
      var query = JSON.parse(JSON.stringify(this.listQuery));
      delete query.page;
      delete query.limit;

      fetchList(query).then(response => {
        var listAll = response.data.items;
        import("@/vendor/Export2Excel").then(excel => {
          const tHeader = [
            "序号",
            "物料代码",
            "对应料号",
            "物料名称",
            "规格",
            "销售订单号",
            "客户订单号",
            "客户名称",
            "业务员",
            "销售出库单号",
            "ERP出库单审核日期",
            "发票号码",
            "ERP发票申请日",
            "发票日期",
            "是否需要现场安装验收",
            "开票时长",
            "是否延期",
            "延期天数",
            "制单人"
          ];
          const filterVal = [
            "FRowNumber",
            "物料代码",
            "对应料号",
            "物料名称",
            "规格",
            "销售订单号",
            "客户订单号",
            "客户名称",
            "业务员",
            "销售出库单号",
            "ERP出库单审核日期",
            "发票号码",
            "ERP发票申请日",
            "发票日期",
            "是否需要现场安装验收",
            "开票时长",
            "是否延期",
            "延期天数",
            "制单人"
          ];
          const data = this.formatJson2(filterVal, listAll);
          excel.export_json_to_excel({
            header: tHeader,
            data,
            filename: "table-list"
          });
          this.listLoading = false;
        });
      });
    },
    formatJson(filterVal) {
      return this.list.map(v =>
        filterVal.map(j => {
          if (j === "timestamp") {
            return parseTime(v[j]);
          } else {
            return v[j];
          }
        })
      );
    },
    formatJson2(filterVal, items) {
      return items.map(v =>
        filterVal.map(j => {
          if (j === "timestamp") {
            return parseTime(v[j]);
          } else {
            return v[j];
          }
        })
      );
    },
    getSortClass: function(key) {
      const sort = this.listQuery.sort;
      return sort === `+${key}` ? "ascending" : "descending";
    }
  }
};
</script>
<style>
.pagination-container {
  margin-top: 0px;
}
.pagination-container[data-v-72233bcd] {
  background: #fff;
  padding: 10px 16px;
}
.el-form-item {
  margin-bottom: 5px;
}
.filter-container .filter-item {
  margin-bottom: 0px;
}
</style>
